@charset "utf-8";
@import "reset";
@mixin paddinglrzero{
    padding-left: 0;
    padding-right: 0;
}
@mixin flexcenter{
    display: flex;
    display: -webkit-flex;
    justify-content: center;
    align-items: center;
}
@mixin flexbetween{  
    display: flex;
    display: -webkit-flex;
    justify-content: space-between;
    align-items: center;
}
@mixin rowwidth{
    width: 85%;
}
@mixin paddinglf{
    padding-left: 5%;
    padding-right: 5%;
    box-sizing: border-box;
}
@function v($p){
    @return $p/1440*100vw;
}

/*-------------------------------------------------------*/
//中部
.section_game{
    //banner轮播图
    .carousel{
        //图片
        .item>img{width: 100%;}
    }
    //game_sample 游戏例子
    .game_sample{
        background: white;
        @include paddinglf;
        position: relative;
        //sample_hot 热门
        .sample_hot{
            background: #e14738;
            width: 40px;
            height: 90px;
            position: absolute;
            //热门字
            p{
                font-size: 20px;
                line-height: 24px;
                width: 20px;
                padding: 16px 10px 0;
                box-sizing: border-box;
                color: white;
            }
            //sample_triangle 三角形
            .sample_triangle{
                position: absolute;
                bottom: 0;
                border-bottom: 15px solid white;
                border-left: 20px solid transparent;
                border-right: 20px solid transparent;
            }
        }
        //sample_row 例子媒体查询
        .sample_row{
            margin-top: 35px;
            //sample_hero 例子英雄图
            .sample_hero{img{width: 100%;}}
            //sample_content 例子内容
            .sample_content{
                padding-bottom: 21px;
                //sample_title 标题
                h3{font-size: 30px;
                    margin-bottom: 18px;}
                //sample_introduction 介绍
                p{font-size: 12px;
                    color: #898989;
                    line-height: 30px;}
                //sample_pic 图片
                .sample_pic{
                    width: 100%;
                    div{width: 100%;
                        overflow: hidden;
                        display: inline-block;
                        margin-top: v(30);}
                    div:nth-of-type(2){
                        text-align: right;
                    }
                    @include flexbetween;
                    img{width:97%;
                        border-radius: 5px;
                        display: inline-block;}
                }
            }
            //第一个右对齐
            .sample_content_txleft{
                h3,p{text-align: right;}
            }
        }
    }
    //game_more 更多案例
    .game_more{
        background: white;
        @include paddinglf;
        padding-top: 100px;
        padding-bottom: 90px;
        .row{
            //moresample 更多案例
            h3{}
            //game_more_alone 单个游戏模板
            .game_more_alone{
                padding-top: 42px;
                text-align: center;
                //game_more_img 图片层
                .game_more_img{
                    border-radius: 5px;
                    overflow: hidden;
                    position: relative;
                    img{width: 100%;
                        position: relative;}
                    //game_more_mask 遮罩
                    .game_more_mask{
                        width: 100%;
                        height: 100%;
                        position: absolute;
                        text-align: left;
                        background: black;
                        opacity: .8;
                        font-size: 12px;
                        color: white;
                        padding: 13px;
                        box-sizing: border-box;
                        top: 0;
                        height: 100%;
                        top:-100%;
                        overflow: hidden;
                    }
                }
                //遮罩显示
                .game_more_img:hover{cursor: pointer;}
                .game_more_img:hover >.game_more_mask{
                    cursor: pointer;
                    animation: movedown .8s forwards;
                }
                
                //game_more_name 游戏名称
                .game_more_name{
                    margin-top: 12px;
                }
            }
        }
    }
    //
}
/*-------------------------------------------------------*/
@keyframes movedown{
    0%{transform: translateY(0);}
//  80%{transform: translateY(100%);}
    100%{transform: translateY(100%);}
}


//------------动画
.game_sample{
    .sample_row{
        .sample_hero:nth-of-type(1):hover{
            cursor: pointer;
            animation: fadeInLeft 1s forwards;
        }
        .sample_hero:nth-of-type(2):hover{
            cursor: pointer;
            animation: fadeInRight 1s forwards;
        }
        .sample_pic:nth-of-type(1){
            div:hover >img{
                cursor: pointer;
                animation: fadeInDown 1s forwards;}
        }
        .sample_pic:nth-of-type(2){
            div:hover >img{
                cursor: pointer;
                animation: fadeInUp 1s forwards;}
        }
    }
}
